<template>
  <div
    style="height: 100%; width: 100%; box-sizing: border-box"
    class="maintable"
  >
    <div style="height: 100%; overflow-x: scroll" id="maindic">
      <div style="width: 132.5rem" class="headerclass">
        <p style="width: 3.5rem; height: 100%">序号</p>
        <p
          style="height: 100%"
          v-for="(item, index) in headerlist"
          :key="index"
          :style="{
            width: index == 6 || index == 7 || index == 9 || index == 10 || index == 11 ? '16rem' : '7rem',
          }"
        >
          {{ item }}
        </p>
      </div>
      <div style="height: 93%; width: 132.5rem" v-if="tableData.length > 0">
        <div
          class="cellstyle"
          v-for="(item, index) in tableData"
          :key="index"
          :class="index % 2 != 0 ? 'cellstyleeven' : ''"
        >
          <div style="width: 3.5rem; height: 100%">
            {{ (currentPage - 1) * 10 + index + 1 }}
          </div>
          <div style="width: 7rem; height: 100%">
            <p class="duohangshng1">{{ item.materialname }}</p>
          </div>
          <div style="width: 7rem; height: 100%">
            <p class="duohangshng1">{{ item.specification }}</p>
          </div>
          <div style="width: 7rem; height: 100%">
            <p class="duohangshng1">{{ item.unit }}</p>
          </div>
          <div style="width: 7rem; height: 100%">
            <p class="duohangshng1">{{ parseInt(item.planquantity) }}</p>
          </div>
          <div style="width: 7rem; height: 100%">
            <p class="duohangshng1">{{ returnFloat(item.price) }}</p>
          </div>
          <div style="width: 7rem; height: 100%">
            <p class="duohangshng1">{{ returnFloat(item.totalprice) }}</p>
          </div>
          <div style="width: 16rem; height: 100%">
            <p class="duohangshng1">{{ item.suppliername }}</p>
          </div>
          <div style="width: 16rem; height: 100%">
            <p class="duohangshng1">{{ item.area }}</p>
          </div>
          <div style="width: 7rem; height: 100%">
            <p class="duohangshng1">{{ item.settlement }}</p>
          </div>
          <div style="width: 16rem; height: 100%">
            <p class="duohangshng1">{{ item.suppliercreatedate }}</p>
          </div>
          <div style="width: 16rem; height: 100%">
            <p class="duohangshng1">{{ item.procunitname }}</p>
          </div>
          <div style="width: 16rem; height: 100%" :title="item.tenderremark">
            <p class="duohangshng1">{{ item.tenderremark }}</p>
          </div>
        </div>
      </div>
      <div
        style="
          height: 93%;
          display: flex;
          align-items: center;
          justify-content: space-around;
        "
        v-else
      >
        暂无数据
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    tableData: Array,
    currentPage: Number,
    headerlist: Array,
  },
  data() {
    return {};
  },
  watch: {
    tableData(newVal, oldVal) {
      console.log(newVal, "newVAL");
      // 获取设置了滚动属性的div标签
      const ele = document.getElementById("maindic");
      // 设置滚动的顶点坐标为滚动的总高度
      ele.scrollLeft = 0;
    },
  },
  methods: {
    returnFloat(num) {
      num = (parseInt(num * 100) / 100).toFixed(2);
      // num = num.toString(); // 转成字符串类型  如能确定类型 这步可省去
      // if (num.indexOf(".") !== -1) {
      //   let [integerPart, decimalPart] = num.split(".");

      //   if (decimalPart.length > 2) {
      //     decimalPart = decimalPart.substring(0, 2);
      //   } else if (decimalPart.length === 1) {
      //     decimalPart += "0";
      //   }

      //   num = `${integerPart}.${decimalPart}`;
      // } else {
      //   num += ".00";
      // }

      return num;
    },
  },
};
</script>

<style scoped lang="scss">
.cellstyle {
  display: flex;
  align-items: center;
  height: 10%;
  box-sizing: border-box;
  text-align: center;
  // white-space: nowrap;
  // overflow: hidden;
  // text-overflow: ellipsis;
  font-family: JCYT;
  font-weight: 400;
  font-size: 0.8rem;
  div {
    display: flex;
    align-items: center;
    justify-content: space-around;
    p {
      width: 100%;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2; /* 设置显示的行数 */
      overflow: hidden;
    }
  }
}

.cellstyleeven {
  background-color: #e4e8f2;
}
.textchuli {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.headerclass {
  background: #192c55;
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 7%;
  text-align: center;
  font-family: JCYT;
  font-weight: 600;
  p {
    // font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
}
</style>
<style >
::-webkit-scrollbar {
  width: 0rem;
  height: 0.5rem;
  background-color: white !important;
}
::-webkit-scrollbar-thumb {
  background-color: #192c55;
}
</style>